<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/css.css">
    <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css"> -->
    <!-- <script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script> -->
    <!-- <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
    <div class="container">
        <div class="middle">
            <nav class="nav">
                <div class="profilePhoto"></div>
                <ul class="navbar" id="navbar">
                    <li class="nav-item">
                      <a class="nav-linka" href="#">我的书架</a>
                        <ul class="toggle">
                            <li><a href="#" id="huoqu">>书籍状态</a></li>
                            <li><a href="#">>已借阅</a></li>
                            <li><a href="#">>借阅爱好</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                      <a class="nav-linkb" href="#">借阅车</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-linkc" href="#">图书归还</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-linkd" href="#">我的信息</a>
                        <ul class="toggle">
                            <li><a href="#">>打印注册信息表</a></li>
                            <li><a href="#">>完善我的信息</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-linke" href="#">推荐购买</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-linkf" href="#">我要捐书</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-linkg" href="#">图书配送</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-linkl" href="#">用户指南</a>
                    </li>
                </ul>
                <button name="quit" ><a href="../新主页填充版/index.html">主界面</a></button>
                <button name="quit"  ><a href="../登录/login.html">退出</a></button>
            </nav>
            <div class="welcome">
                <div class="fontdemo">你好，用户!</div>
                <div class="font">Welcome USER!</div>
                <div class="helloUser"></div>
            </div>
            <div class="book-condition">书籍状态
                <!-- 字号23  -->
                <span id="demo8"></span>
                <span id="demo9"></span>
            </div>
            <div class="borrowed">已借阅<p id="demo10"></p></div>
                
            <div class="borrow-hobby">借阅爱好
                <legend>借阅时间分布</legend>
                <div class="sheet"></div><br>
                <legend>借阅类型分布</legend>
                <div class="sheet"></div>
            </div>
            <div class="borrow-car">借阅车
                <form autocomplete="off">
                    <input  id="bwbook" type="text" placeholder="书名" required="required"><br>
                    <!-- <input  id="bwauthor" type="text" placeholder="作者" required="required">
                    <input  id="bwdate" type="text" placeholder="借阅日期" required="required"><br> -->
                    <button type="button">借阅申请</button>
                </form>
            </div>
            <div class="book-return">图书归还
                <form>
                    <input id="rtbook" type="text" placeholder="书名" required="required">
                    <p id="return"></p>
                    <!-- <input id="rtauthor" type="text" placeholder="作者" required="required">
                    <input id="rtdate" type="text" placeholder="借阅日期" required="required"> -->
                </form>
                <button>图书归还</button>
            </div>
            <div class="myInformation">
                <div class="information">我的信息<br>
                    <form autocomplete="off">
                    *用户名 :<input id="username" type="text" required="required"><br>
                    *姓名  :<input id="name01" type="text" required="required"><br>
                    *班级  :<input id="classroom" type="text" placeholder="例如:暖通2102" required="required"><br>
                    *性别 :<input id="sex" type="text" placeholder="男/女" required="required"><br>
                    QQ  :<input id="qq" type="text"><br>
                    微信 :<input id="weichat" type="text"><br>
                    爱好 :<input id="hobbit" type="text"><br>
                    阅读兴趣:<input id="rdhobby" type="text"><br>
                    <button type="button">提交</button>
                    </form>
 
                </div>
            </div>
            <div class="rigisterSheet">注册信息表
                <form autocomplete="off">
                    <div class="rigister">注册信息</div>
                    <input id="username02" type="text" placeholder="用户名" required="required">
                    <button type="button">打印</button>
                    <p id="demo1"></p>
                    <p id="demo2"></p>
                    <p id="demo3"></p>
                    <p id="demo4"></p>
                    <p id="demo5"></p>
                    <p id="demo6"></p>
                    <p id="demo7"></p>
                </form>
            </div>
            <div class="recommend">推荐购买
                <form autocomplete="off">
                    <input id="rcdbook" type="text" placeholder="书名" required="required">
                    <input id="rcdauthor" type="text" placeholder="作者" required="required"><br>
                    <input id="rcdreason" type="text" placeholder="推荐理由">
                    <button type="submit" onclick="alert('请求已收到，请线下联系管理员')">提交</button>
                </form>
            </div>
            <div class="donation-book">图书捐赠
                <form>
                    <input id="dntbook" type="text" placeholder="书名" required="required">
                    <input id="dntauthor" type="text" placeholder="作者" required="required">
                    <input id="dntdate" type="text" placeholder="捐赠日期">
                </form>
                <button onclick="alert('请求已收到，请线下联系管理员')">图书捐赠</button>
            </div>              
            <div class="book-distribution">图书配送
                <div>敬请期待!</div>
            </div>
            <div class="user-guide">用户指南
                <div>小米云测服务(TestIt)为开发者提供了多款小米手机MIUI系统可供选择，方便开发者实时对手机应用在小米的设备上进行开发测试。TestIt 云测服务提供了多种测试服务，包括：快速兼容性测试，全面遍历测试，深度性能测试，以及远程云端调试</div>
            </div>                      
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="./js/js.js"></script>

</html>